<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据字典</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!--引入本地的css样式-->
  <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../static/css/admin.css" media="all">

</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">关键字:</label>
            <div class="layui-input-block">
              <input type="text" name="dict_name" id="dict_name" placeholder="请输入字典名称" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" id="btn_search" lay-submit lay-filter="LAY-user-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="layui-card-body">
        <script type="text/html" id="toolbarDemo">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-admin" lay-event="add">添加</button>
          <button class="layui-btn layuiadmin-btn-admin" lay-event="del">删除</button>

        </div>
        </script>

        <table id="LAY-dict-back-manage" lay-filter="LAY-dict-back-manage"></table>

<!--        <script type="text/html" id="buttonTpl">-->
<!--          {{#  if(d.check == true){ }}-->
<!--            <button class="layui-btn layui-btn-xs">已审核</button>-->
<!--          {{#  } else { }}-->
<!--            <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>-->
<!--          {{#  } }}-->
<!--        </script>-->
<!--        <script type="text/html" id="table-useradmin-admin">-->
<!--          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>-->
<!--          {{#  if(d.role == '超级管理员'){ }}-->
<!--            <a class="layui-btn layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
<!--          {{#  } else { }}-->
<!--            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
<!--          {{#  } }}-->
<!--        </script>-->
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="mod">修改</a>

        </script>
      </div>
    </div>
  </div>

<script src="../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
    layui.config({
        base: '../../static/layui/layuiadmin/' //静态资源所在路径js
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>

  <script type="text/javascript">
      layui.use('table', function(){
          var table = layui.table;

          table.render({
              elem: '#LAY-dict-back-manage'
              ,url:'/dict/queryDict'
              ,title: '数据字典信息列表'
              ,toolbar:'#toolbarDemo'//头部工具栏
              ,cols: [[
                   {type: 'checkbox', fixed: 'left'}
                  ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
                  ,{field:'dict_name', title:'名称'}
                  ,{field:'dict_num', title:'字典编码'}
                  ,{field:'dict_value', title:'参数值'}
                  ,{field:'dict_time', title:'最后修改时间'}
                  ,{field:'operator', title:'操作人'}
                  ,{title:'操作',fixed:'right',toolbar:'#barDemo'}
              ]]
              ,page: true
            ,limits:[5,10,15,20]
          });

        //按条件搜索,绑定单击事件
        $("#btn_search").click(function (){
          //获取输入框的客户名
          var dict_name = $("#dict_name").val();
          //表格重载
          table.reload('LAY-dict-back-manage', {
            url:'/dict/search',
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              dict_name:dict_name,
            }
          });
        })

        //监听行工具事件/侧边工具栏
        table.on('tool(LAY-dict-back-manage)',function (obj){
          var data = obj.data;//选中的当前行数据
          //获取事件名，根据不同的事件名做出不同的处理
          if(obj.event === 'mod'){//编辑功能
            layer.open({
              type:2,//iframe层
              title:'修改数据字典',
              content:'edit.html',//展示编辑页面
              area:['450px','550px'],
              maxmin:true,
              btn:['保存','返回'],
              yes:function (index, layero){
                //应该把edit.html页面表单的数据提交给服务器
                //在当前页面-list.html获取iframe层-edit.html的DOM-form表单
                var body = layer.getChildFrame('body', index);
                //获取edit.html页面中所有表单的数据
                var submitData = body.find("#myform").serialize();//serialize()只能序列化表单中文本
                //发起Ajax请求
                $.ajax({
                  url:"/dict/mod",
                  type:"post",
                  data:submitData,
                  dataType: "json",
                  success:function (res){
                    if(res.code==200){
                      layer.msg(res.msg,{
                        offset:'15px',
                        icon:1,
                        time:1000
                      },function (){
                        //刷新
                        window.location.reload();
                      })
                    }
                    if(res.code==500){
                      layer.msg(res.msg,{
                        offset:'15px',
                        icon:1,
                        time:1000
                      },function (){
                        //刷新
                        window.location.reload();
                      })
                    }
                    layer.close(index);//关闭弹层
                  }
                })
              },
              success: function(layero, index){//子页面edit.html页面数据回显
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                //input控件的输入框/隐藏框
                body.find("input[name=dict_num]").val(data.dict_num);
                body.find("input[name=dict_name]").val(data.dict_name);
                body.find("input[name=dict_value]").val(data.dict_value);
                body.find("input[name=id]").val(data.id);

                body.find("textarea[name=remark]").val(data.remark);

                //刷新渲染  重要！！！！
                iframeWin.layui.form.render();
              }
            })
          }else if(obj.event === 'show'){

          }
        })
        //监听头部工具栏
        table.on('toolbar(LAY-dict-back-manage)',function (obj){
          var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event){
            case 'del':
              var data = checkStatus.data;
              if(data.length<1){
                layer.msg('您还未选中删除的数据')
              }else{
                //删除：提示确认框，发起Ajax请求
                layer.confirm('确定要删除选中行数据吗?',function (index){
                  var ids = new Array();
                  $.each(data,function (index,item){
                    //循环遍历选中的数据，只要数据的id，把id塞入到数组中
                    ids.push(item.id);
                  })
                  //发起Ajax请求
                  $.ajax({
                    url:"/dict/del",
                    type:"post",
                    data:{ids:ids},
                    traditional: true,//数组进行传统的序列化操作
                    dataType:"json",
                    success:function (res){
                      layer.msg(res.msg,{
                        offset:'15px',
                        icon:1,
                        time:1500
                      },function (){
                        //刷新
                        window.location.reload();
                      })
                    }
                  })
                })
              }
              break;
            case 'add':
              layer.open({
                type:2,//iframe层
                title:'添加数据字典',
                content:'add.html',//展示编辑页面
                area:['450px','550px'],
                maxmin:true,
                btn:['保存','返回'],
                yes:function (index, layero){
                  //应该把edit.html页面表单的数据提交给服务器
                  //在当前页面-list.html获取iframe层-edit.html的DOM-form表单
                  var body = layer.getChildFrame('body', index);
                  //获取edit.html页面中所有表单的数据
                  var submitData = body.find("#myform").serialize();//serialize()只能序列化表单中文本
                  //发起Ajax请求
                  $.ajax({
                    url:"/dict/add",
                    type:"post",
                    data:submitData,
                    dataType: "json",
                    success:function (res){
                      if(res.code==200){
                        layer.msg(res.msg,{
                          offset:'15px',
                          icon:1,
                          time:1000
                        },function (){
                          //刷新
                          window.location.reload();
                        })
                      }
                      if(res.code==500){
                        layer.msg(res.msg,{
                          offset:'15px',
                          icon:1,
                          time:1000
                        },function (){
                          //刷新
                          window.location.reload();
                        })
                      }
                      layer.close(index);//关闭弹层
                    }
                  })
                }
              })
              break;
          }
        })
      })
  </script>

</body>
</html>

